<template>
  <!-- 堆叠柱状图 -->
  <div style="width: 100%; height: 100%">
    <div ref="oneLeft" class="multiBeam" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'StackedPortaint',
  props: {
    /** 底边栏数组 */
    // eslint-disable-next-line vue/require-default-prop
    chartData: {
      type: Array,
      require: true
    },
    /** 堆叠数组 */
    // eslint-disable-next-line vue/require-default-prop
    lengthData: {
      type: Array,
      require: true
    },
    /** 柱子默认宽度 */
    barWidth: {
      type: String,
      default: '20%'
    },
    /** 是否显示拖动条 */
    dataZoomShow: {
      type: Boolean,
      default: false
    },
    endnum: {
      type: Number,
      default: 60
    },
    /** 右上角数组 */
    seriesData: {
      type: Array,
      require: true
    },
    color: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: ['#5470c6', '#91cc75', '#16b5e6', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#f6e43c', '#9a60b4', '#ea7ccc']
    },
    bottom: {
      type: String,
      default: '0%'
    },
    top: {
      type: String,
      default: '13%'
    }
  },
  data() {
    return {
      chart: null,
      // 柱状图配置项
      scoreOption: {}
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.onResize)
    window.onresize = null
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      console.log(11, this.chartData, this.lengthData)
      this.chart = echarts.init(this.$refs.oneLeft)
      this.scoreOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        color: this.color,
        legend: {
          // 顶部圆点
          top: 0,
          //   left: 20,
          itemWidth: 15,
          right: 0,
          itemHeight: 15,
          // padding: [5, 10],
          textStyle: {
            fontSize: 14,
            color: '#000',
            padding: [0, 0, 0, 0]
          }
        },
        grid: {
          top: this.top,
          left: '0%',
          right: '0%',
          bottom: this.bottom,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              // color: '#96A4F4'
              interval: 0,
              textStyle: {
                color: '#666666',
                fontFamily: 'MicrosoftYaHei',
                fontSize: '18',
                lineHeight: '25'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#999999'
              },
              width: 5
            },
            data: this.chartData, // x轴数组
            axisTick: true // 隐藏刻度代码
          }
        ],
        yAxis: {
          type: 'value',
          axisTick: true, // 隐藏刻度代码
          axisLine: {
            show: false,
            lineStyle: {
              color: '#000'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          }
        },
        dataZoom: [
          // {
          //   show: this.dataZoomShow,
          //   height: 12,
          //   xAxisIndex: [0],
          //   bottom: '2%',
          //   start: 10,
          //   end: 120,
          //   // handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
          //   handleSize: '100%',
          //   handleStyle: {
          //     color: '#ccc'
          //   },
          //   textStyle: {
          //     color: 'rgba(0,0,0,0)'
          //   },
          //   borderColor: '#ccc'
          // },
          // {
          //   type: 'inside',
          //   show: this.dataZoomShow,
          //   height: 15,
          //   start: 0,
          //   end: this.endnum
          // },
          {
            show: this.dataZoomShow,
            height: 12,
            start: 0,
            end: this.endnum,
            xAxisIndex: [0],
            handleSize: 0, // 滑动条的 左右2个滑动条的大小
            left: '5%', // 左边的距离
            right: '5%', // 右边的距离
            bottom: 0, // 右边的距离
            borderColor: 'none',
            fillerColor: 'rgb(229,229,229)',
            borderRadius: 5,
            backgroundColor: 'rgba(229, 229, 229, .36)', // 两边未选中的滑动条区域的颜色
            showDataShadow: false, // 是否显示数据阴影 默认auto
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            textStyle: {
              fontSize: 0
            },
            // endValue: , // 从0开始的相当于5个
            borderWidth: 0,
            handleStyle: {
              color: '#d3dee5'
            }
          }
        ],
        series: [
          {
            name: this.seriesData[0],
            barWidth: this.barWidth, // y轴柱宽

            type: 'bar',
            stack: 'Ad',
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            },
            emphasis: {
              focus: 'series'
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 130, 230, 360]
            data: this.lengthData[0]
          },
          {
            name: this.seriesData[1],
            type: 'bar',
            barWidth: this.barWidth, // y轴柱宽
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [420, 132, 101, 134, 90, 230, 210, 130, 230, 360],
            data: this.lengthData[1],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[2],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [620, 132, 101, 134, 90, 230, 210, 130, 230, 360],
            data: this.lengthData[2],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[3],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [360, 360, 360, 360, 360, 360, 360, 360, 360, 360],
            data: this.lengthData[3],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[4],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [230, 230, 230, 230, 230, 230, 230, 230, 230, 360],
            data: this.lengthData[4],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[5],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 130, 230, 360],
            data: this.lengthData[5],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[6],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 130, 230, 360],
            data: this.lengthData[6],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[7],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 130, 230, 360],
            data: this.lengthData[7],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[8],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',

            emphasis: {
              focus: 'series'
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 130, 230, 360],
            data: this.lengthData[8],
            itemStyle: {
              normal: {
                // barBorderRadius: [4, 4, 0, 0]
                // barBorderRadius: 4
              }
            }
          },
          {
            name: this.seriesData[9],
            barWidth: this.barWidth, // y轴柱宽
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            // data: [210, 210, 210, 210, 210, 210, 210, 210, 230, 210],
            data: this.lengthData[9],
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0]

                // barBorderRadius: 4
              }
            }
          }
        ]
      }
      this.chart.setOption(this.scoreOption)
      window.addEventListener('resize', this.onResize)
    },
    onResize() {
      this.chart.resize()
    }
  }
}
</script>
  <style scoped>
.multiBeam {
  width: 100%;
  height: 100%;
}
</style>

